<template>
  <section class="features" id="features">
    <div class="container">
      <h2>Server <span>Features</span></h2>
      <div class="features-grid">
        <div
            class="feature-card"
            v-for="feature in features"
            :key="feature.title"
            :style="{ '--hover-color': feature.color }"
        >
          <div class="feature-icon">
            <img src="../../assets/logo_128.png" :alt="feature.title">
          </div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const features = [
  {
    title: 'Survival++',
    description: 'Enhanced survival with custom mechanics',
    color: '#44aaff'
  },
  {
    title: 'Mini Games',
    description: 'Daily rotating game modes',
    color: '#8844ff'
  },
  {
    title: 'Economy',
    description: 'Player-driven market system',
    color: '#ff44aa'
  }
]
</script>

<style scoped>
.features {
  padding: 5rem 0;
  background: #0a0a0a;
  position: relative;
}

.features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h30v30H0V0zm30 30h30v30H30V30z' fill='%2344aaff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
}

h2 span {
  background: linear-gradient(90deg, #44aaff, #8844ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.feature-card {
  background: rgba(20, 20, 30, 0.7);
  border: 1px solid rgba(68, 170, 255, 0.2);
  border-radius: 8px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      135deg,
      transparent 48%,
      var(--hover-color, #44aaff) 49%,
      var(--hover-color, #44aaff) 51%,
      transparent 52%
  );
  background-size: 5px 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(68, 170, 255, 0.1);
  border-color: rgba(68, 170, 255, 0.5);
}

.feature-card:hover::before {
  opacity: 0.3;
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: rgba(68, 170, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.feature-icon img {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 5px var(--hover-color, #44aaff));
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #e0e0e0;
}

.feature-card p {
  color: #aaa;
  line-height: 1.6;
}
</style>